<template>
  <el-dialog title="新增跟进记录"
             :visible="dialogVisible"
             custom-class="trace-centen-dailog"
             append-to-body
             :close-on-click-modal="false"
             @open="onOpenCallback"
             @close="onClose">
    <el-form :model="channelInfo" size="small" label-width="85px" ref="channelInfo" :rules="rules">
      <el-form-item label="跟进人员" prop="followinguser">
        <el-input v-model="channelInfo.followinguser"></el-input>
      </el-form-item>
      <el-form-item label="跟进类型" prop="type">
        <el-select v-model="channelInfo.type" collapse-tags placeholder="跟进类型">
          <el-option v-for="item in this.appEnum.channelFollowingType" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="跟进时间" prop="followingtime">
        <el-date-picker v-model="channelInfo.followingtime" popper-class="date-picker" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="跟进内容" prop="followingcontent">
        <el-input type="textarea" :rows="4" v-model="channelInfo.followingcontent"></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="info"
                 size="mini"
                 @click="onClose">取 消</el-button>
      <el-button type="primary"
                 size="mini"
                 @click="onChange">确 定</el-button>
    </div>

  </el-dialog>
</template>

<script>
  import Moment from 'moment'
  import { mapGetters } from 'vuex'
  import { addChannelfollowing } from '@/api/channel'

  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      channelId: {
        type: Number
      }
    },
    data() {
      return {
        setting: {
          loadding: false
        },
        channelInfo: {
          followingcontent: '',
          followingtime: null,
          channelId: null,
          followinguser:'',
          type: 2
        },
        rules: {
          followingcontent: [
            { required: true, message: '请输入跟进内容!', trigger: 'blur' }
          ],
          followingtime: [
            { required: true, message: '请输入跟进时间!', trigger: 'blur' }
          ],
          followinguser: [
            { required: true, message: '请输入跟进人员!', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择跟进类型!', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'appEnum'
      ])
    },
    methods: {
      onOpenCallback() {
        this.channelInfo.channelId = this.channelId
        this.channelInfo.followinguser = this.userInfo.name
        this.channelInfo.followingtime = Moment().format('YYYY-MM-DD HH:mm:ss');
        this.channelInfo.creatoruserid = this.userInfo.id
        this.channelInfo.creationtime = Moment().format('YYYY-MM-DD HH:mm:ss');
      },
      onClose() {
        this.$refs.channelInfo.resetFields()
        this.$emit('close')
      },
      onChange() {
        this.$refs.channelInfo.validate(valid => {
            if (valid) {
              this.addRecord()
            }
          }
        )
      },
      // 新增跟进记录
      addRecord() {
        addChannelfollowing(this.channelInfo).then(res => {
          if (res.data.success) {
            const result = res.data.data
            if (result) {
              this.$message({
                message: '新增跟进记录成功!',
                type: 'success',
                duration: 5 * 1000
              })
              this.onClose()
            } else {
              this.$message({
                message: result.Message,
                type: 'error',
                duration: 5 * 1000
              })
            }
          }
        })
      }
    }
  }
</script>
